<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>

    <!-- 1.重置样式 -->
    <link rel="stylesheet" href="../../assets/css/normalize.css">

    <!-- 2.公共样式 -->
    <link rel="stylesheet" href="../../assets/css/common.css">

    <link rel="stylesheet" href="../login/login.css">

    <!-- 3.当前样式 -->
    <style>
        .head {
            border-bottom: 1px solid #aec7ec;
            position: relative;
        }
        
        .head-nav li a {
            color: black;
        }
        
        .head-btn a:first-child {
            color: #000;
        }
        
        .head-nav .active::after {
            content: '';
            display: block;
            width: 100%;
            height: 3px;
            color: #00bdff;
            border-bottom: 2px solid #00bdff;
            position: absolute;
            top: 40px;
        }
        /* 顶部导航类 */
        
        .top h4 {
            margin-top: 50px;
            margin-bottom: 10px;
            font-size: 24px;
            font-weight: normal;
        }
        
        .top ul a {
            padding: 0 16px;
            line-height: 24px;
            border: 1px solid #ccc;
            font-size: 12px;
            color: #666;
            border-radius: 6px;
            float: left;
            margin-right: 14px;
            margin-top: 10px;
        }
        
        .top .kind .active {
            color: #00bdff;
            border: 1px solid #00bdff;
        }
        
        .top .kind .features {
            font-weight: 700;
        }
        /* 搜索框 */
        
        .search {
            margin: 60px auto;
        }
        
        .search .all {
            font-weight: bold;
            margin-right: 20px;
        }
        
        .ver {
            font-weight: bold;
            margin-right: 20px;
            color: red;
            margin-left: 20px;
            display: none;
        }
        
        .search input {
            outline: none;
            border: 1px solid #ccc;
            border-radius: 15px;
            height: 30px;
            width: 230px;
            background: #f4f4f4;
            padding: 0 14px;
            box-sizing: border-box;
            position: relative;
        }
        
        .search img {
            position: absolute;
            margin: 6px 0 0 -30px;
        }
        /* 主体部分 */
        
        .main-box li {
            width: 227px;
            height: 270px;
            border: 1px solid #eee;
            text-align: center;
            box-sizing: border-box;
            float: left;
            margin-right: 16px;
            margin-bottom: 16px;
            position: relative;
        }
        
        .main-box li:nth-child(5n) {
            margin-right: 0px;
            margin-bottom: 0px;
        }
        
        .main-box li img {
            margin-top: 40px;
            margin-bottom: 10px;
        }
        
        .main-box li p {
            line-height: 24px;
        }
        
        .main-box li .one {
            color: #666;
        }
        
        .main-box li .two {
            color: #29c287;
        }
        
        .main-box li button {
            width: 192px;
            color: #fff;
            background-color: #00bdff;
            line-height: 32px;
            margin-top: 32px;
            border: none;
            display: none;
        }
        
        .main-box li:hover button {
            display: inline-block;
            cursor: pointer;
        }
        /* 企业专用 */
        
        .main-box li span {
            position: absolute;
            margin: 10px 0 0 -70px;
            color: #00bdff;
            background-color: #e5f8ff;
        }
        /* 点击申请后弹出框 */
        
        .clear {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, .5);
            display: none;
            z-index: 100;
        }
        
        .box {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: 200;
            background-color: #fff;
            height: 500px;
            width: 400px;
        }
    </style>

</head>

<body>
    <!-- 
        布局思想: 从整体到局部 先建框后填内容
    -->

    <!-- 头部 -->
    <header class="head clearfix">
        <h1 class="fl">
            <a href="#"><img src="../../assets/imgs/new-logo-white2.png" alt=""></a>
        </h1>

        <nav class="head-nav">
            <ul class="clearfix">
                <li><a href="#">首页</a></li>
                <li class="active"><a href="#">API</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">案例</a></li>
                <li><a href="#">开发者</a></li>
            </ul>
        </nav>

        <div class="fr head-btn">
            <a href="#">登录</a>
            <a class="head-regbtn" href="#">注册有礼</a>
        </div>

    </header>

    <!-- 顶部导航类 -->
    <div class="top container">
        <h4>API分类</h4>
        <ul class="kind clearfix">
            <li><a href="" class="active">全部</a></li>
            <li><a href="">生活服务</a></li>
            <li><a href="">金融科技</a></li>
            <li><a href="">交通地理</a></li>
            <li><a href="">充值缴费</a></li>
            <li><a href="">数据智能</a></li>
            <li><a href="">企业工商</a></li>
            <li><a href="">应用开发</a></li>
            <li><a href="">电子商务</a></li>
            <li><a href="">吃喝玩乐</a></li>
            <li><a href="">文娱视频</a></li>
            <li><a href="" class="features">免费接口大全</a></li>
            <li><a href="">短信</a></li>
            <li><a href="">汽车</a></li>
            <li><a href="">核验</a></li>
            <li><a href="" class="features">最新发布</a></li>
            <li><a href="" class="features">API私有化部署</a></li>
        </ul>
    </div>

    <!-- 搜索框 -->
    <div class="search container">
        <span class="all">全部</span>
        <input type="text" placeholder="身份证实名" id="card">
        <img src="../../assets/imgs/magnifier.png" alt="">
        <span class="ver">! 请正确输入信息</span>
    </div>

    <!-- 主体部分 -->
    <div class="main container">
        <div class="main-box">
            <ul class="our clearfix">
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span>企业专用</span>
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span>企业专用</span>
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span>企业专用</span>
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span>企业专用</span>
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <span>企业专用</span>
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="../../assets/imgs/API_01.jpg" alt="">
                        <p class="one">2021出行防疫政策指南</p>
                        <p class="two">免费</p>
                        <button class="btns">申请数据</button>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 点击申请后弹出框 -->
    <div class="clear"></div>
    <div class="box">
        <div class="account">
            <a href="">
                <img src="../../assets/imgs/loginlogo.png" alt="">
            </a>
            <!-- 登录方式/注册公用样式-->
            <div class="login-method">
                <a href="javascript:" class="active" id="num">账号登录<span></span></a>
                <a href="javascript:" id="sacn-code">扫码登录<span></span></a>
            </div>

            <div class="one">
                <!-- 账号输入 -->
                <div class="inputs clearfix" id="to-login">
                    <div class="bank">
                        <span></span>
                        <input type="text" name="" id="bankInp" placeholder="用户名/手机号/邮箱">
                        <img id="bankImg" src="../../assets/imgs/clearInput.png" alt="">
                    </div>
                    <!-- 判断信息是否正确时提示信息 -->
                    <p class="userbox">请正确输入用户名</p>
                    <div class="pwd">
                        <span></span>
                        <input type="password" name="" id="pwdInp" placeholder="密码">
                        <img id="pwdImg" src="../../assets/imgs/clearInput.png" alt="">
                    </div>
                    <!-- 判断信息是否正确时提示信息 -->
                    <p class="passbox">请正确输入用户密码</p>
                    <!-- 忘记密码 -->
                    <p class="forgotpwd clearfix"><a href="">忘记密码</a></p>
                    <!-- 登录点击 -->
                    <input type="button" value="登录" id="loginBtn" class="login-btn">

                    <!-- 注册账号 -->
                    <p class="have">
                        还没有源码账号，
                        <a href="">立即注册</a>
                        <span></span>
                    </p>
                </div>
            </div>

            <!-- 扫码登录 -->
            <div class="scan" style="display: none;" id="sweep">
                <div class="code">
                    <img src="../../assets/imgs/showqrcode.jpg" alt="">
                    <p>微信扫码登录</p>
                    <p>未关注源码科技公众号，请先关注后再登录</p>
                </div>
                <!-- 注册账号 -->
                <p class="have">还没有源码账号，
                    <a href="">立即注册</a>
                    <span></span>
                </p>

            </div>
        </div>

    </div>

    <!-- 尾部 -->
    <footer class="footer">
        <div class="container">
            <!-- 顶部 -->
            <div class="footer-top clearfix">
                <dl class="footer-item fl">
                    <dt class="item-title">联系与支持</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">关于源码</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">快速入口</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">产品服务</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" class="item-link" href="#" target="_blank">常见问题
                        </a">
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <dl class="footer-item fl">
                    <dt class="item-title">解决方案</dt>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">400-882-7715</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">售前咨询</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">客服&amp;售后</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">常见问题</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">极速工单</a>
                    </dd>
                    <dd class="item-desc">
                        <a class="item-link" href="#" target="_blank">投诉与建议</a>
                    </dd>
                </dl>
                <!-- 右边的微信图标 -->
                <div class="wechat fr">
                    <p class="title">微信公众号</p>
                    <p class="name">源码时代</p>
                    <img src="../../assets/imgs//wechat-white.png" alt="">
                </div>
            </div>
            <!-- 底部 -->
            <p class="footer-btm clearfix">
                <a href="#" class="fl mr10">
                    <img src="../../assets/imgs//bei2.png" alt="">
                </a>
                <a href="#" class="fl mr10">
                    <img src="../../assets/imgs//bei1.png" alt=""> </a>
                <span class="fl mr10">增值电信业务经营许可证：蜀B2-20180596</span>
                <a href="#" class="fl mr10">蜀ICP备15006450号-3</a>
                <a href="#" class="fl mr10">营业执照</a>
                <span class="fr">源码大数据股份有限公司©版权所有</span>

            </p>
        </div>
    </footer>
    <!-- 当前js -->
    <script>
        // 获取类名
        let features = document.querySelectorAll('.features');
        let links = document.querySelectorAll('.kind a');
        //定义变量保存上一个菜单的索引
        let index = 0;
        links.forEach(function(v, i) {
            v.addEventListener('mouseover', function() {
                    //先清除上一个菜单的类名
                    links[index].className = '';
                    // 再给当前菜单li添加激活样式
                    this.className = 'active';
                    //将当前的索引i赋给index
                    index = i;
                })
                // v.addEventListener('mouseout', function() {
                //     features.style.fontWeight = '700';
                // })
        });
        // 搜索框身份证实名
        let cardval = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        let card = document.querySelector('#card');
        let ver = document.querySelector('.ver');
        card.addEventListener('blur', function() {
            if (cardval.test(card.value)) {
                ver.style.display = 'none';
            } else {
                ver.style.display = 'inline-block';
            }
        })

        // 主体部分
        // let our = document.querySelectorAll('.our');
        let lis = document.querySelectorAll('.our li');
        var btns = document.querySelectorAll('.btns');
        let box = document.querySelector('.box');
        let body = document.querySelector('body');
        let clear = document.querySelector('.clear')
        let int = 0;
        btns.forEach(function(a, b) {
            a.addEventListener('click', function() {
                box.style.display = 'block';
                clear.style.display = 'block';
                // clear.style.zIndex = 12;
            });
        });
        clear.addEventListener('click', function() {
            box.style.display = 'none';
            clear.style.display = 'none';
        })
    </script>
    <script src="../login/login.js"></script>
</body>

</html>